<html>
  <head>
    <title>
      动画
    </title>
  </head>
  <body>
    <script>
      /*
          一、uni.createAnimation(OBJECT)

                    1、概述

                                创建一个动画实例 animation。调用实例的方法来描述动画。
                                
                                最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

                    2、平台差异说明

                                  App	HarmonyOS Next	    H5	              微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                  √	      x	          HBuilderX 2.0.4+	      √	        √           	√         	√	                  √	          x	      x             √      √

                              ★、注意：
                                  
                                      ①、export 方法每次调用后会清掉之前的动画操作
                                      
                                      ②、nvue 暂不支持

                    3、OBJECT参数说明：

                                          参数	            类型	    必填	默认值	      说明

                                      ①、duration	        Integer	    否	  400	        动画持续时间，单位ms

                                      ②、timingFunction	  String	    否	"linear"	    定义动画的效果

                                      ③、delay	          Integer	    否	0	            动画延迟时间，单位 ms

                                      ④、transformOrigin	String	    否	"50% 50% 0"	  设置transform-origin	

                                <1>、timingFunction 有效值：

                                                    值	            说明

                                                ①、linear	      动画从头到尾的速度是相同的

                                                ②、ease	        动画以低速开始，然后加快，在结束前变慢

                                                ③、ease-in	    动画以低速开始

                                                ④、ease-in-out	动画以低速开始和结束

                                                ⑤、ease-out	    动画以低速结束

                                                ⑥、step-start	  动画第一帧就跳至结束状态直到结束

                                                ⑦、step-end	    动画一直保持开始状态，最后一帧跳到结束状态


                                                eg：
                                                      var animation = uni.createAnimation({
                                                        transformOrigin: "50% 50%",
                                                        duration: 1000,
                                                        timingFunction: "ease",
                                                        delay: 0
                                                      })
      */

      /*
            二、animation

                        1、概述

                                         动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

                        2、animation 对象的方法列表：

                                          ★、样式：

                                                          方法	                参数	        说明

                                                      ①、opacity	            value	      透明度，参数范围 0~1

                                                      ②、backgroundColor	    color	      颜色值

                                                      ③、width	              length	    长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

                                                      ④、height	              length	    长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

                                                      ⑤、top	                length	    长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

                                                      ⑥、left	                length	    长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

                                                      ⑦、bottom	              length	    长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值

                                                      ⑧、right	              length	    长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值


                                          ★、旋转：

                                                          方法	    参数	              说明

                                                      ①、rotate	    deg	            deg的范围-180~180，从原点顺时针旋转一个deg角度

                                                      ②、rotateX	  deg	            deg的范围-180~180，在X轴旋转一个deg角度

                                                      ③、rotateY	  deg	            deg的范围-180~180，在Y轴旋转一个deg角度

                                                      ④、rotateZ	  deg	            deg的范围-180~180，在Z轴旋转一个deg角度

                                                      ⑤、rotate3d	  (x,y,z,deg)	    同transform-function rotate3d

                                          ★、缩放：

                                                          方法	    参数	          说明

                                                      ①、scale	  sx,[sy]	        一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数

                                                      ②、scaleX	  sx	            在X轴缩放sx倍数

                                                      ②、scaleY	  sy	            在Y轴缩放sy倍数
                                                      
                                                      ④、scaleZ	  sz	            在Z轴缩放sz倍数

                                                      ⑤、scale3d	(sx,sy,sz)	    在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数


                                          ★、偏移：

                                                          方法	          参数	          说明

                                                      ①、translate	    tx,[ty]	      一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。

                                                      ②、translateX	    tx	          在X轴偏移tx，单位px

                                                      ③、translateY	    ty	          在Y轴偏移ty，单位px

                                                      ④、translateZ	    tz	          在Z轴偏移tz，单位px

                                                      ⑤、translate3d	(tx,ty,tz)	    在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px


                                          ★、倾斜：

                                                          方法	      参数	          说明

                                                      ①、skew	      ax,[ay]	    参数范围-180~180；一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度；两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度

                                                      ③、skewX	    ax	        参数范围-180~180；Y轴坐标不变，X轴坐标延顺时针倾斜ax度

                                                      ③、skewY	    ay	        参数范围-180~180；X轴坐标不变，Y轴坐标延顺时针倾斜ay度


                                            ★、矩阵变形：

                                                            方法	      参数	                    说明

                                                      ①、matrix	      (a,b,c,d,tx,ty)	      同 transform-function matrix
                                                      
                                                      ②、matrix3d		                        同transform-function matrix3d

                        3、动画队列
                        
                                  调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，
                                  
                                  一组动画完成后才会进行下一组动画。step 可以传入一个跟 uni.createAnimation() 一样的配置参数用于指定当前组动画的配置。


                         4、示例代码

                                    <view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view>

                                    export default{
                                      data() {
                                        return {
                                          animationData: {}
                                        }
                                      },
                                      onShow: function(){
                                        var animation = uni.createAnimation({
                                          duration: 1000,
                                            timingFunction: 'ease',
                                        })

                                        this.animation = animation

                                        animation.scale(2,2).rotate(45).step()

                                        this.animationData = animation.export()

                                        setTimeout(function() {
                                          animation.translate(30).step()
                                          this.animationData = animation.export()
                                        }.bind(this), 1000)
                                      },
                                      methods:{
                                        rotateAndScale: function () {
                                          // 旋转同时放大
                                          this.animation.rotate(45).scale(2, 2).step()
                                          this.animationData = this.animation.export()
                                        },
                                        rotateThenScale: function () {
                                          // 先旋转后放大
                                          this.animation.rotate(45).step()
                                          this.animation.scale(2, 2).step()
                                          this.animationData = this.animation.export()
                                        },
                                        rotateAndScaleThenTranslate: function () {
                                          // 先旋转同时放大，然后平移
                                          this.animation.rotate(45).scale(2, 2).step()
                                          this.animation.translate(100, 100).step({ duration: 1000 })
                                          this.animationData = this.animation.export()
                                        }
                                      }
                                    }
      */
    </script>
  </body>
</html>